<script setup>
import { ref, onMounted } from 'vue'
import { NewsTypes } from '@/mock/news'
import { useRoute } from 'vue-router'
const $route = useRoute()
const items = NewsTypes
const current = ref(items[0])
const xinwen = ref()

function onSeledType(type) {
  current.value = type
  xinwen.value = undefined
}
onMounted(() => {
  xinwen.value = undefined
  const {
    query: { type = NewsTypes[0].type, index }
  } = $route

  if (typeof +index == 'number') {
    const tindex = NewsTypes.findIndex((n) => n.type == type)
    current.value = NewsTypes[tindex]
    xinwen.value = NewsTypes[tindex].data[index]
  }
})
</script>
<template>
  <section
    class="w-full mx-auto flex flex-column justify-content-center align-items-center h-24rem bg-no-repeat bg-cover"
    style="background-image: url(/mock/tzmn.9861b08b.png)"
  >
    <span class="text-7xl mb-5 text-white">政策咨询</span>
  </section>
  <section
    class="container mx-auto my-7 flex justify-content-start align-content-center gap-5 bg-white"
  >
    <div class="flex-none w-24rem bg-white">
      <div
        v-for="(item, index) of items"
        text=""
        :class="{
          'bg-primary': item.type == current.type
        }"
        class="cursor-pointer w-full h-4rem border-noround flex justify-content-center align-items-center"
        :key="index"
        :label="item.title"
        @click="onSeledType(item)"
      >
        <span class="text-2xl">{{ item.type }}</span>
      </div>
    </div>
    <div class="w-full p-5 flex flex-column gap-1">
      <section class="flex justify-content-between align-items-center w-full">
        <span class="border-left-3 border-primary text-3xl pl-2">{{ current.type }}</span>
      </section>
      <Divider />
      <template v-if="!xinwen">
        <span
          v-for="(post, index) of current.data"
          :key="index"
          @click="xinwen = post"
          class="w-full flex-grow flex justify-content-between text-xl py-0 cursor-pointer text-700 mb-1"
        >
          <span>{{ post.title }}</span>
          <span>{{ post.date }}</span>
        </span>
      </template>
      <template v-if="xinwen">
        <section class="flex flex-column align-items-center">
          <p class="text-4xl text-center">
            {{ xinwen.title }}
          </p>
          <div class="flex justify-content-center gap-5 text-xl text-gray-500">
            <span>时间: {{ xinwen.date }}</span>
            <span>来源: {{ xinwen.source }}</span>
          </div>
        </section>
        <Divider />
        <section class="w-full text-2xl" v-html="xinwen.body"></section>
      </template>
    </div>
  </section>
</template>
